<template>
  <div>
    <div v-if="editMode" :style="{width:detail.style.position.w+'px',height: detail.style.position.h+'px'}"
         class="view-panel"></div>
    <iframe :src="childUrl" :style="{width:detail.style.position.w+'px',height: detail.style.position.h+'px'}"></iframe>
  </div>
</template>

<script>

import BaseView from './View';

export default {
  name: 'view-panel',
  extends: BaseView,
  data() {
    return {
      childUrl: '',
    }
  },
  computed: {
    dataInit() {
      return this.detail.dataBind.ztPageData;
    }
  },
  watch: {
    dataInit() {
      if (this.detail.dataBind.ztPageData) {
        let split = this.detail.dataBind.ztPageData.split('&')
        const routeUrl = this.$router.resolve({
          path: '/fullscreen',
          query: {
            guid: split[0],
            deviceImei: split[1],
            t: new Date().getTime()
          }
        })
        this.childUrl = routeUrl.href;
      }
    }
  },
  mounted() {
    let ip = this.topoUtil.getServerIp();
    let port = this.topoUtil.getServerPort();
    if (this.detail.dataBind.ztPageData) {
      let split = this.detail.dataBind.ztPageData.split('&')
      const routeUrl = this.$router.resolve({
        path: '/fullscreen',
        query: {
          guid: split[0],
          deviceImei: split[1],
          t: new Date().getTime()
        }
      })
      // console.log("当前打开窗口");
      this.childUrl = routeUrl.href;
    }
  },
}
</script>

<style lang="scss" scoped>
.view-panel {
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}
</style>
